<template>
    <div class="login-container">
        <div class="login-form">
            <div class="login-form-view">
                <div class="login-title">欢迎登陆</div>
                <div class="login-sub-title">后台管理系统</div>
                <div class="login-form-item" style="margin-top: 60px">
                    <img style="width: 18px;height: 18px" src="../../assets/img/account.png" alt=""/>
                    <input class="login-input" v-model="loginForm.mobile" placeholder="账号"/>
                </div>
                <!--                <div class="login-form-item" style="margin-top: 20px">-->
                <!--                    <img style="width: 18px;height: 18px" src="../../assets/img/password.png" alt=""/>-->
                <!--                    <input class="login-input" v-model="loginForm.password" placeholder="密码"/>-->
                <!--                </div>-->
                <div class="login-form-item" style="margin-top: 20px">
                    <img class="input-icon" src="../../assets/img/code.png" alt=""/>
                    <input class="login-input" v-model="loginForm.code"
                           placeholder="验证码" style="width: 100px" aria-placeholder="验证码"
                    />
                    <span class="input-split"></span>
                    <div class="login-code">
                        <img :src="codeUrl" @click="getCodeImg" class="login-code-img"/>
                    </div>
                </div>

                <!--                <div style="margin-top: 10px">-->
                <!--                    <span class="forget_password" style="cursor: pointer;"> 忘记密码</span>-->
                <!--                    <span class="register_btn" @click="register_user"> 注册</span>-->
                <!--                </div>-->
                <div class="login-button" @click="submitLogin">登陆</div>
            </div>
        </div>


    </div>
</template>

<script>
    import {login, usr_info, get_code_img, v2_login} from "@/api/auth";
    import {set_token} from "@/utils/token";
    import {set_info} from '@/utils/info';

    export default {
        data() {
            return {
                codeUrl: "",
                mobile: "",
                code: "",
                sec: 60,
                sendDisable: false,
                loginForm: {
                    mobile: "",
                    password: "",
                    code: "",
                    uuid: ""
                }
            };
        },

        watch: {
            mobile(v1, v2) {
                if (v1.length === 12) {
                    this.mobile = v2;
                }
            },
            code(v1, v2) {
                if (v1.length === 5) {
                    this.code = v2;
                }
            }
        },
        created() {
            this.getCodeImg();
        },


        methods: {
            //获取图形验证码
            getCodeImg() {

                get_code_img().then(res => {
                    if (res.status === 200) {
                        this.codeUrl = "data:image/gif;base64," + res.data.img;
                        this.loginForm.uuid = res.data.uuid;
                    }
                })
            },


            //注册
            // register_user() {
            //     console.log("------------------")
            //     this.$router.push({path: "/register"});
            // },

            submitLogin() {
                if (!this.loginForm.mobile) {
                    this.$message({type: "error", message: "输入手机号"});
                    return;
                }
                const reg = /^1[3|4|5|6|8|9][0-9]\d{8}$/;
                if (!reg.test(this.loginForm.mobile)) {
                    this.$message({type: "error", message: "输入正确的手机号"});
                    return;
                }
                if (!this.loginForm.code) {
                    this.$message({type: "error", message: "请输入验证码"});
                }
                v2_login(this.loginForm.mobile, this.loginForm.code,
                    this.loginForm.uuid).then(response => {
                    //保存token
                    set_token(response.data);
                    usr_info().then(res => {
                        if (res.status === 200) {
                            //保存用户信息
                            set_info(res.data);
                            this.$router.push({
                                path: "/home",
                            });
                            //发送上线通知
                            this.sendNotify(res.data.nickname)
                        }
                    });
                });

            },
            //发送通知
            sendNotify(nickname) {
                this.$notify({
                    title: 'Mars',
                    message: nickname + ' 欢迎来到Mars',
                    type: 'success'
                });
            },


            submitForm() {
                if (!this.mobile) {
                    this.$message({type: "error", message: "输入手机号"});
                    return;
                }
                const reg = /^1[3|4|5|6|8|9][0-9]\d{8}$/;
                if (!reg.test(this.mobile)) {
                    this.$message({type: "error", message: "输入正确的手机号"});
                    return;
                }
                if (!this.code) {
                    this.$message({type: "error", message: "请输入验证码"});
                }
                login(this.mobile, this.code).then(response => {
                    usr_info({token: response.data}).then(res => {
                        if (res.status === 200) {
                            //保存token
                            set_token(response.data);
                            //保存用户信息
                            set_info(res.data);
                            this.$router.push({
                                path: "/sysuser",
                            });
                        }
                    });
                });
            }
        }
    };
</script>

<style lang="less">
    .icp {
        width: 100%;
        position: absolute;
        bottom: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .number,
        .version {
            color: #fff;
            opacity: 0.8;
            font-size: 14px;
            line-height: 25px;
        }
    }


    .login-code-img {
        background-color: white;
        border-radius: 10px;
        height: 38px;
    }

    .login-container {
        position: relative;
        height: 100vh;
        width: 100vw;
        background-color: #151515;
        //background-image: url("../../assets/img/login-background.jpg");
    }

    .login-code {
        width: 33%;
        height: 38px;
        float: right;

        img {
            cursor: pointer;
            vertical-align: middle;
        }
    }

    .login-form {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 850px;
        height: 500px;
        border-radius: 12px;
        display: flex;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    }

    .login-form-image {
        height: 100%;
    }

    .login-title {
        color: #2EFEC8;
        font-size: 30px;
        font-weight: 800;
    }

    .login-form-view {
        margin-top: -100px;
        height: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

    }

    .login-sub-title {
        margin-top: 20px;
        color: #2EFEC8;
        font-size: 22px;
        font-weight: 800;
    }

    .login-form-item {
        width: 250px;
        height: 40px;
        padding: 0 10px;
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 40px;
        display: flex;
        align-items: center;
        box-shadow: 0 2px 10px rgba(61, 126, 255, 0.2);
    }

    .login-form-item:hover {
        box-shadow: 0 4px 10px rgba(29, 212, 181, 0.2);
    }

    .input-icon {
        width: 20px;
        height: 20px;
    }

    .login-input {
        margin-left: 5px;
        outline: none;
        border: none;
    }

    .input-split {
        background-color: #CCCCCC;
        height: 20px;
        width: 1px;
        margin: 0 15px;
    }

    .send-button {
        color: #2EFEC8;
        cursor: pointer;
        font-size: 12px;
    }

    .login-button {
        margin-top: 30px;
        background: linear-gradient(to right, #2EFEC8, #2EFEC8);
        box-shadow: 0 4px 10px rgba(61, 126, 255, 0.5);
        width: 250px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 16px;
        border-radius: 40px;
        cursor: pointer;
    }

    .login-button:hover {
        box-shadow: 0 4px 10px rgba(255, 113, 50, 0.5);
    }

    .forget_password {

        color: white;
    }

    .forget_password:hover {
        cursor: pointer;
        color: #2EFEC8;

    }

    .register_btn {
        margin-left: 10px;
        color: white;
    }

    .register_btn:hover {
        cursor: pointer;
        color: #2EFEC8;

    }


</style>
